<template>
  <view
      v-if="message.contentType !== imMessageType.AT
      && message.contentType !== imMessageType.MAP
      && message.contentType !== imMessageType.CUSTOM"
  >
    <!--时间显示，类似于微信，隔5分钟不发言，才显示时间-->
    <view class="time-lag">{{ renderMessageDate() }}</view>
    <view
        v-if="message.status === imMessageStatus.REVOKE"
        class="message-recalled"
    >
      <view
          v-if="message.senderRole === imSenderRole.MERCHANT"
          class="message-recalled-self"
      >
        <view>你撤回了一条消息</view>
        <!--              <text v-if="message.type === 'text' && Date.now()-message.timestamp< 60 * 1000 "-->
        <!--                    @click="editRecalledMessage(message.content.text)">重新编辑</text>-->
      </view>
      <view v-else>{{ formatSenderRole(message.senderRole) }}撤回了一条消息</view>
    </view>
    <view class="message-item" v-else>
      <view class="message-item-content" :class="{'self' : message.senderRole === imSenderRole.MERCHANT}">
        <view class="avatar">
          <block v-if="message.senderRole === imSenderRole.MERCHANT">
            <image v-if="message.headImage" :src="message.headImage" />
            <text v-else class="iconfont" style="color:#FF7D00">&#xe6da;</text>
          </block>
          <text v-else class="iconfont" style="color:#1677FF">&#xe6d8;</text>
        </view>

        <view class="content" @click.right="showActionPopup" @longpress="showActionPopup">
          <view class="message-payload">
            <view
                v-if="message.contentType === imMessageType.TEXT"
                class="text-content"
                :class="{'self' : message.senderRole === imSenderRole.MERCHANT}"
                v-html="renderTextMessage(message)"
            />
            <image
                v-else-if="message.contentType === imMessageType.IMAGE"
                lazy-load
                :draggable="false"
                show-menu-by-longpress
                :src="message.content.image"
                class="image-content"
                mode="heightFix"
                @click="showImageFullScreen(message.content.image)"
            ></image>
            <view
                v-else-if="message.contentType === imMessageType.VIDEO"
                class="video-snapshot"
                @click="playVideo(message.content.video)"
            >
              <image
                  :src="message.content.thumbnailUrl"
                  :style="[getVideoThumbStyle(message.content)]"
              />
              <view class="video-play-icon" />
            </view>
            <view
                v-else-if="message.contentType === imMessageType.VOICE"
                class="audio-content"
                @click="playAudio(message)"
            >
              <view class="audio-facade" :style="{width:(Math.ceil(message.content.duration) || 1) * 7 + 50 + 'px'}">
                <view
                    class="audio-facade-bg"
                    :class="{'play-icon':playingMessage && playingMessage.imMessageId === message.imMessageId}"
                />
                <!-- "表示秒 -->
                <view>{{Math.ceil(message.content.duration) || ''}}<text>{{ message.content.duration ? '"' : '' }}</text></view>
              </view>
            </view>
            <view
                v-else-if="message.contentType === imMessageType.ORDER"
                class="order-content"
                @click="toOrder(message.content.order)"
            >
              <view class="order-header">
                <view class="seq">{{ message.content.order.orderSeq ? `#${message.content.order.orderSeq}` : '' }}</view>
                <view class="status">{{ message.content.order.orderStatusDesc }}</view>
              </view>
              <view class="order-body">
                <view class="order-item">
                  <text class="label">订单号</text>
                  <text>{{ message.content.order.channelOrderNo }}</text>
                </view>
                <view class="order-item">
                  <text class="label">下单时间</text>
                  <text>{{ formatOrderTime(message.content.order.orderTime) }}</text>
                </view>
              </view>
              <view class="order-footer">
                <text>详情</text>
                <text class="iconfont">&#xe6a9;</text>
              </view>
            </view>
            <view
                v-else-if="message.contentType === imMessageType.GOODS"
                class="goods-content"
            >
              <view class="goods-header">
                <image :src="message.content.goods.goodsUrl" />
                <view class="name">{{ message.content.goods.goodsName }}</view>
              </view>
              <view class="goods-body">
                <view class="goods-item">
                  <text class="label">商品编码</text>
                  <text>{{ message.content.goods.skuCode }}</text>
                </view>
                <view class="goods-item">
                  <text class="label">商品条码</text>
                  <text>{{ message.content.goods.barcode }}</text>
                </view>
              </view>
            </view>
          </view>
          <!--                <view-->
          <!--                    v-if="message.senderRole === imSenderRole.MERCHANT-->
          <!--                      && (message.status === imMessageStatus.SUCCESS || message.status === imMessageStatus.READ)"-->
          <!--                    :class="message.status === imMessageStatus.READ ? 'message-read':'message-unread'"-->
          <!--                >-->
          <!--                  <view>{{ message.status === imMessageStatus.READ ? '已读' : '未读' }}</view>-->
          <!--                </view>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatTime } from '@/utils/util'
import {imMessageStatus, imSenderRole, imMessageType} from "@/common/constant/im";
import im from '@/core/mixins/im'
import { isEmptyObject } from "@/utils/util";

export default {
  mixins: [im],
  props: {
    message: {
      type: Object,
      default: () => ({})
    },
    messageList: {
      type: Array,
      default: () => ([])
    },
    index: {
      type: Number,
      default: 0
    },
    playingMessage: {
      type: Object,
      default: () => ({})
    },
    emoji: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      imMessageStatus,
      imSenderRole,
      imMessageType
    }
  },
  methods: {
    /**
     * 判断消息内容体是否为空
     */
    contentIsEmpty(content) {
      return isEmptyObject(content)
    },
    /**
     * 渲染文本消息，如果包含表情，替换为图片<br/>
     * 注：本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
     * @param message
     * @returns {string}
     */
    renderTextMessage(message) {
      return '<span>' + this.emoji.decoder.decode(message.content.text || '') + '</span>'
    },
    /**
     * 像微信那样显示时间，如果有几分钟没发消息了，才显示时间<br/>
     * 注：本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
     * @returns {string}
     */
    renderMessageDate() {
      if (this.index === 0) {
        return formatTime(this.message.sendTime)
      } else {
        if (Number(this.message.sendTime || '0') - Number(this.messageList[this.index - 1].sendTime || '0') > 5 * 60 * 1000) {
          return formatTime(this.message.sendTime)
        }
      }
      return ''
    },
    /**
     * 格式化订单时间
     * @param str
     * @returns {string}
     */
    formatOrderTime(str) {
      if (str) {
        return this.$moment(str).format('YYYY-MM-DD HH:mm')
      }
      return ''
    },
    /**
     * 获取视频缩略样式
     * @param content
     */
    getVideoThumbStyle(content) {
      const MAX_WIDTH = 254
      const { width, height } = content
      if (width && height) {
        // 超出最大宽度处理
        if (width > MAX_WIDTH) {
          return { width: '508rpx', height: '236rpx' }
        }
        return { width: `${width}px`, height: `${height}px` }
      }
      return { width: '188rpx', height: '288rpx' }
    },
    /**
     * 修改撤回的消息
     * @param text
     */
    editRecalledMessage(text) {
      this.$emit('editRecalledMessage', text)
    },
    /**
     * 展示操作菜单
     */
    showActionPopup() {
      this.$emit('showActionPopup', this.message)
    },
    /**
     * 查看大图
     * @param imageUrl
     */
    showImageFullScreen(imageUrl) {
      uni.previewImage({
        urls: [imageUrl]
      })
    },
    /**
     * 播放视频
     * @param video
     */
    playVideo(video) {
      this.$emit('playVideo', video)
    },
    /**
     * 播放视频
     * @param message
     */
    playAudio(message) {
      this.$emit('playAudio', message)
    },
    /**
     * 跳转订单详情
     * @param order
     */
    toOrder(order) {
      this.$emit('order', order)
    }
  }
}
</script>

<style scoped lang="scss">
.message-item {
  display: flex;
  margin: 20rpx 0;
}

.message-item .message-item-content {
  flex: 1;
  display: flex;
}

.message-item .message-item-content.self {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.message-item .avatar {
  width: 72rpx;
  height: 72rpx;
  flex-shrink: 0;
  flex-grow: 0;
}

.message-item .avatar .iconfont {
  font-size: 72rpx;
}

.message-item .avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.content {
  font-size: 34rpx;
  line-height: 44rpx;
  margin: 0 20rpx;
  max-width: 508rpx;
  box-sizing: border-box;
}

.content .message-payload {
  display: flex;
  align-items: center;
}

.content .image-content {
  border-radius: 12rpx;
  max-height: 200px;
}

.content .text-content {
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  color: #333333;
  background: #FFFFFF;
  word-break: break-all;
  text-align: left;
  vertical-align: center;
  display: block;
  font-size: 28rpx;
  line-height: 40rpx;
  box-sizing: border-box;
}

.content .text-content.self {
  background: #E1E7FD;
}

.content .text-content img {
  width: 50rpx;
  height: 50rpx;
}

.video-snapshot {
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
}

.video-snapshot image {
  background-color: #eaeaea;
  border-radius: 12rpx;
}

.video-snapshot .video-play-icon {
  position: absolute;
  width: 64rpx;
  height: 64rpx;
  background: url("../../../static/message/play.png") no-repeat center;
  background-size: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.time-lag {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  margin-bottom: 12rpx;
}

.audio-content {
  height: 72rpx;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.audio-facade {
  min-width: 20rpx;
  padding: 16rpx 20rpx;
  background: #FFFFFF;
  font-size: 32rpx;
  border-radius: 14rpx;
  color: #000000;
  display: flex;
}

.audio-facade-bg {
  background: url("../../../static/message/voice.png") no-repeat center;
  background-size: 30rpx;
  width: 40rpx;
  height: 40rpx;
}

.audio-facade-bg.play-icon {
  background: url("../../../static/message/play.gif") no-repeat center;
  background-size: 30rpx;
}

.order-content, .goods-content {
  width: 508rpx;
  border-radius: 12rpx;
  background: #FFFFFF;
  padding: 16rpx 20rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.order-content .order-header,
.goods-content .goods-header {
  display: flex;
  margin-bottom: 8rpx;
}

.order-content {
  .order-header {
    align-items: center;

    .seq {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
    .status {
      flex-shrink: 0;
      color: #2D71FD;
      font-size: 24rpx;
    }
  }
  .order-footer {
    text-align: right;
    color: #2D71FD;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 24rpx;
    line-height: 34rpx;
    margin-top: 24rpx;
  }
}

.order-content .order-body .order-item,
.goods-content .goods-body .goods-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #333333;
  margin-top: 16rpx;
  line-height: 34rpx;

  .label {
    color: #999999;
    padding-right: 16rpx;
    flex-shrink: 0;
  }
}

.goods-content .goods-header {
  image {
    width: 96rpx;
    height: 96rpx;
    border-radius: 8rpx;
  }
  .name {
    margin-left: 16rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 34rpx;
    color: #333333;
  }
}

.message-read {
  color: grey;
  font-size: 32rpx;
  text-align: end;
}

.message-unread {
  color: #d02129;
  font-size: 32rpx;
  text-align: end;
}

.message-recalled {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  text-align: center;
  margin: 20rpx 0;

  view {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.65);
  }
}

.message-recalled .message-recalled-self {
  display: flex;
}

.message-recalled .message-recalled-self text {
  margin-left: 10rpx;
  color: #d02129;
}
</style>
